<template>
	<el-row class="userList">
		<el-col :span="24">
			<div class="grid-content">
				<div class="">
					<el-button @click="add" type="primary" size="small" icon="plus">新增</el-button>
					<el-button @click="modifyData" type="primary" size="small" icon="edit">修改</el-button>
				<el-button @click="deleteData" type="danger" size="small" icon="delete">删除</el-button>
				</div>
				<div class="data-list">
					<el-table :data="tableData" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
						<el-table-column inline-template width="55">
							<div>
								<label class="radio">
									<input type="radio" value="2" :data-index="$index" name="radio">
									<span class="dot"></span>
								</label>
							</div>
						</el-table-column>
						 <el-table-column prop="username" label="步骤顺序" width="100">
      					</el-table-column>
				        <el-table-column prop="descript" label="步骤描述" width="100">
				      </el-table-column>
						<el-table-column prop="parObject" label="父对象" width="100">
						</el-table-column>
						<el-table-column prop="objectType" label="对象类型" width="100">
						</el-table-column>
						<el-table-column prop="valueName" label="属性名称" width="100">
						</el-table-column>
						<el-table-column prop="valueObject" label="属性值" width="100">
						</el-table-column>
						<el-table-column prop="idObject" label="对象序号" width="100">
						</el-table-column>
						<el-table-column prop="operate" label="操作方法" width="100">
						</el-table-column>
						<el-table-column prop="value1" label="操作值1" width="100">
						</el-table-column>
						<el-table-column prop="value2" label="操作值2" width="100">
						</el-table-column>
						<el-table-column prop="result" label="测试结果" width="100">
						</el-table-column>
						<el-table-column prop="exception" label="异常信息" width="100">
						</el-table-column>
					</el-table>
					<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="1" :page-sizes="[10,20, 50, 100]" :page-size="pageSize" layout="->,prev, pager, next, jumper, sizes,total" :total="totalSize">
					</el-pagination>
				</div>
			</div>
		</el-col>

		<!--新增和修改用户-->
		<el-dialog :title="title" v-model="addAndModify" size="tiny">
			<el-form :model="userForm" :rules="rules" ref="userForm">
				<el-input type="hidden" v-model="userForm.userId"></el-input>
				<el-form-item prop="username" label="步骤顺序" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="typeCode" auto-complete="off"></el-input>
				</el-form-item>

				<el-form-item label="步骤描述" :label-width="formLabelWidth">
					<el-select v-model="userId" :disabled="disabled">
						<el-option label="打开浏览器" value="1"></el-option>
						<el-option label="点击按钮" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="父对象" :label-width="formLabelWidth">
					<el-select v-model="typeCode" :disabled="disabled">
						<el-option label="CCP" value="1"></el-option>
						<el-option label="EBIL" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="username" label="对象类型" :label-width="formLabelWidth">
					<el-select v-model="typeCode" :disabled="disabled">
						<el-option label="Browser" value="1"></el-option>
						<el-option label="Page" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="username" label="属性名称" :label-width="formLabelWidth">
					<el-select v-model="typeCode" :disabled="disabled">
						<el-option label="id" value="1"></el-option>
						<el-option label="xpath" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="username" label="属性值" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="对象序号" :label-width="formLabelWidth">
					<el-input :disabled="disabled" v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="操作方法" :label-width="formLabelWidth">
					<el-select v-model="userForm.typeCode" :disabled="disabled">
						<el-option label="open" value="1"></el-option>
						<el-option label="click" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="username" label="操作值1" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="操作值2" :label-width="formLabelWidth">
					<el-input :disabled="disabled" v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="测试结果" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="username" label="异常信息" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="username" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submitForm('userForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--导出-->
		 <el-dialog title="提示" v-model="exportCase" size="tiny">
		  <span>确认导出该数据吗？</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="exportCase = false">取 消</el-button>
		    <el-button type="primary" @click="exportCase = false">确 定</el-button>
		  </span>
		</el-dialog>
	</el-row>
		
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import {
		Notification
	} from 'element-ui';

	export default {
		data() {

				var vUsername = (rule, value, callback) => {
					if(value === '') {
						callback(new Error('请输入用户工号'));
					} else {
						callback();
					}
				};
				return {
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() < Date.now() - 8.64e7;
						}
					},
					userForm: {
						userId: '',
						typeCode: '1',
						username: '',
						pwd: '',
						sysCode:'',
						sysName:'',
						version:'',
						moduleCount:'',
						creatorUser:'',
						
						id:'',
						descript:'',
						parObject:'',
						objectType:'',
						valueName:'',
						valueObject:'',
						idObject:'',
						operate:'',
						value1:'',
						value2:'',
						result:'',
						exception:''
					},
					tableData: [],
					exportCase:false,
					roleData: [],
					hasRoleData: [],
					currentRow: null,
					addAndModify: false,
					formLabelWidth: '100px',
					multipleSelection: [],
					hasRoleSelection: [],
					roleModel: '',
					props: {
						label: 'name',
						children: 'zones'
					},
					title: '新增用户',
					isShow: false,
					disabled: false,
					pageSize: 10,
					totalSize: 0,
					userId: '',
					defaultRole: '',
					rules: {
						username: [{
							validator: vUsername,
							trigger: 'blur'
						}]
					}
				}
			},
			methods: {
				getPageData(param) {
					if(!param || param == {}) {
						var param = {}
					}
					if(!param.hasOwnProperty("pageSize")) {
						param.pageSize = this.pageSize
					}
					if(!param.hasOwnProperty("start")) {
						param.start = 0
					}
					
					this.$httpExt().get('tsUser/userData',
							param
						)
						.then((response) => {
							var body = response.result
							this.totalSize = body.totalSize		
							var data = body.rows
							console.log(data)
							this.tableData = data
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				queryData() {
					this.getPageData(this.conditionForm)
				},
				handleCurrentChange(val) {	
					if(!val) {
						return
					}
					var that = this
					this.currentRow = val;
					this.userId = val.username
					setTimeout(function() {
						if(that.$el.querySelector("tr.current-row")) {
							var current = that.$el.querySelector("tr.current-row").querySelector("input[type=radio]")
							that.index = current.dataset.index
						}
					}, 30)
				},
				hasRoleSelection(val) {
					console.log(val)
				},
				add() {

					this.title = '新增测试步骤'
					this.addAndModify = true
					this.disabled = false
					this.isShow = false

				},

				modifyData() {
					this.title = '修改测试步骤'
					if(this.index) {
						this.addAndModify = true
						this.disabled = false
						this.isShow = false
						this.$httpExt().get('%20tsUser/selectByPrimaryKey', {

							'userId': this.userId,

						}).then((response) => {
							var data = response.result
							this.userForm = data
							data.typeCode == 1 ? this.isShow = false : this.isShow = true
//							this.disabled = true

						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});

					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}
				},
				deleteData() {
					if(this.index) {
						this.$confirm('确定删除该配置吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$httpExt().get('tsUser/deleteByPrimaryKey', {

								'userId': this.userId,

							}).then((response) => {

								var body = response
								this.tableData.splice(this.index, 1);
								this.index = ''
								Message({
									message: '删除成功!',
									type: 'success'
								});

							}, (response) => {
								Notification.error({
									title: '异常',
									message: response.msg
								})
							})

						}).catch(() => {

						});
					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}

				},
				submitForm(form) {

					if(this.userForm.userId == "" || this.userForm.userId == null) {
						this.$refs[form].validate((valid) => {
							if(valid) {
								this.saveUser()
							} else {
								return false;
							}
						});
					} else {
						this.saveUser()
					}

				},
				saveUser() {
					let params = "userId=" + this.userForm.userId + "&username=" + this.userForm.username + "&typeCode=" + this.userForm.typeCode + "&pwd=" + this.userForm.pwd + "&pwdModifyTm=" + this.userForm.pwdModifyTm + "&status=" + this.userForm.status;
					params += "&activeTm=" + this.userForm.activeTm + "&deactiveTm=" + this.userForm.deactiveTm + "&modifierUser=" + this.userForm.modifierUser + "&modifyTm=" + this.userForm.modityTm + "&creatorUser=" + this.userForm.creatorUser + "&createTm=" + this.userForm.createTm;
					this.$httpExt().get('tsUser/saveUser',
						this.userForm
					).then((response) => {
						Message({
							message: '保存成功',
							type: 'success'
						});
					}, (response) => {
						Notification.error({
							title: '异常',
							message: response.msg
						})
					});

					this.addAndModify = false
				},
				cancel() {
					this.$refs.userForm.resetFields()
					this.addAndModify = false

				},
				formatterType(row, column) {
					return row.typeCode == '1' ? '域用户帐号' : '非域用户帐号';
				},
				formatterState(row, column) {
					return row.status == true ? '有效' : '无效';
				},
				formatterDate(row, column) {

					if(row.modifyTm) {
						return row.modifyTm.substring(0, 10)
					}
					if(row.deactiveTm) {
						return row.deactiveTm.substring(0, 10)
					}

				},
				
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				hasRoleDataChange(val) {
					this.hasRoleSelection = val;
				},
				moveRight() {
					this.roleModel = ''
					for(let hindex in this.hasRoleData) {
						for(let mindex in this.multipleSelection) {

							//flag 此处判断对象是否相等有bug,有接口之后应该判断角色ID是否相等
							if(this.multipleSelection[mindex].roleId === this.hasRoleData[hindex].roleId) {

								Message({
									message: '已经存在了' + this.multipleSelection[mindex].roleName + '角色！',
									type: 'warning'
								});
								this.multipleSelection.splice(mindex, 1)
							}

						}

					}
					let joinArray = this.hasRoleData.concat(this.multipleSelection);

					this.hasRoleData = joinArray;

				},
				moveLeft() {
					let roleData = this.hasRoleData
					let roleSelect = this.hasRoleSelection

					for(var hindex = 0; hindex < roleData.length; hindex++) {
						for(var sindex = 0; sindex < roleSelect.length; sindex++) {
							if(roleSelect[sindex].roleId == roleData[hindex].roleId) {

								//删除之后原有下标改变
								roleData.splice(hindex--, 1)
							}
						}
					}

				},
				checkDefaultRole(roleId) {
					this.defaultRole = roleId
				},
				saveRoleData() {
					let that = this
					let hrd = this.hasRoleData
					let params = 'userId=' + this.userId
					if(this.defaultRole != '') {
						params += '&defaultRole=' + this.defaultRole
					}
					hrd.forEach(function(sub) {
						if(sub.expDate == undefined || sub.expDate == '') {
							sub.expDate = ''
							params += '&roleId=' + sub.roleId + '&expDate='
						} else {
							params += '&roleId=' + sub.roleId + '&expDate=' + that.formatDateToString(sub.expDate)
						}

					})

					this.$httpExt().get('tsUserRole/saveUserRole?' + params).then((response) => {

						Message({
							message: response.msg,
							type: 'success'
						});


					}, (response) => {
						Notification.error({
							title: '异常',
							message: response.msg
						})
					});

					this.addAndModify = false
				},
				sizeChange(val) {
					var param = {
						pageSize: val
					}
					this.getPageData(param)
				},
				currentChange(val) {
					var start = (val - 1) * this.pageSize
					var param = {
						start: start
					}
					this.getPageData(param)
				},
				formatDateToString(date) {
					
					if(typeof date == 'object') {
						var year = date.getFullYear();
						var month = date.getMonth() + 1;
						var day = date.getDate();
						if(month < 10) month = "0" + month;
						if(day < 10) day = "0" + day;
						return year + '-' + month + '-' + day;
					} else if(typeof date == 'string') {
						return date.substring(0, 10)
					}

				}

			},
			mounted() {
//				this.userForm.userId = this.$store.state.global.name22
				this.getPageData()
			}
	}
</script>

<style>
	.roleRadio {
		width: 15px;
		overflow: hidden;
		padding: 7px;
	}
</style>